<%@ include file="/common/taglibs.jspf"%>
<!DOCTYPE html>
<html lang="en">
  <head >
	    <title>Bootstrap, from Twitter</title>
	    <!--  
	    <meta charset="utf-8">	
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta name="description" content="">
	    <meta name="author" content="">
	    -->
	    <link type="text/css" rel="stylesheet" href="${ctx}/resources/js/jquery/ux/chosen/chosen.css" />
  </head>
  <body>
  
      <!--Body content-->
      
      <!-- start for detail -->
      	<div id="detailPanel" class="detail-top"  style="display:none; border: solid 1px green; border-radius:4px;padding : 5px 5px 0 15px;margin-bottom:10px;">
	      	<div style="height: 15px;">
		        <button id="closeButton"  type="button" class="close pull-right">&times;close</button>
	      	</div>
            <form id="SysUserForm" class="form-horizontal" action="${ctx}/system/add_sys_user.do">
	            <div >
	              <h4>Add or Edit</h4>
	              <p>Use this function to add or edit an system user.</p>
	              
				  <div class="control-group">
				    <label class="control-label"><spring:message code="user.userName"/></label>
				    <div class="controls">
				      <input type="hidden" name="userId" >
				      <input type="text"  name="userName" placeholder="User Name">
				    </div>
				  </div>
				  <div class="control-group">
				    <label class="control-label"><spring:message code="user.password"/></label>
				    <div class="controls">
				      <input type="password" name="password" placeholder="Password">
				    </div>
				  </div>
				  <div class="control-group">
				    <label class="control-label" ><spring:message code="user.fullName"/></label>
				    <div class="controls form-inline ">
				      <input style="width:95px;" type="text" name="firstName" placeholder="First Name">
				      <input style="width:95px;" type="text" name="lastName" placeholder="Last Name">
				    </div>
				  </div>
				  <div class="control-group">
				    	<label class="control-label" for="userRoles"><spring:message code="user.userRoles"/></label>
					    <div class="controls form-inline ">
							<select id="userRoles" name="roleIds" data-placeholder="User Roles" style="width:224px;" multiple class="chzn-select" tabindex="8">
								  <c:forEach var="role_item" items="${rolesAll}">
						         	 <option value="${role_item.roleId}">${role_item.roleName}</option>
								  </c:forEach>
					        </select>
				        </div>
				  </div>
	              
	            </div>
		           <div style="padding:5px;" class="offset4">
		              <a id="editButton" class="btn btn-primary">Edit</a>
		              <a id="saveButton" class="btn btn-primary disabled">Save</a>
		            </div>
            </form>
	      </div>
      <!-- end for detail -->
      	  <div id="showMessage"></div>
      	  
      	  <form id="formForList" action="${ctx}/system/userlist.do" method="post">
			<div class="control-group">
			    <div class="controls">
				    <input type="text" id="inputUserName" name="Q_userName_S_LK" value="${Q_userName_S_LK}" placeholder="Search By User Name">
				    <input type="submit" class="btn btn-info" value="Search" style="margin-bottom:9px;">
		      	    <page:pageForList pagingBean="${pageBean}"/>
			    </div>
			  </div>
		  </form>
      <!-- table start -->
      <div id="listPanel">
		  <table id="sysUserTable" class="table table-bordered table-hover table-condensed">
			  <thead>
				<tr >
					<td colspan="6" >
					   <a class="btn btn-primary" href="#" id="addButton"><i class="icon-pencil"></i>Add</a>
					   <a class="btn btn-primary" href="#" id="delButton"><i class="icon-trash"></i> Delete</a>
					   <a class="btn btn-primary" href="#" ><i class="icon-ban-circle"></i> Ban</a>
					</td>
				</tr>
		  		<tr>
		  			<th>#</th>
		  			<th><spring:message code="user.userId"/></th>
		  			<th><spring:message code="user.userName"/></th>
		  			<th><spring:message code="user.password"/></th>
		  			<th><spring:message code="user.lastName"/></th>
		  			<th><spring:message code="user.firstName"/></th>
		  			<th><spring:message code="user.roles"/></th>
		  		</tr>
		  		</thead>
		  		<tbody>
		  		<c:forEach var="user" items="${userList }">
		  			<tr >
		  				<td>
		  					<input type="checkbox" name="checkboxForUser" value="${user.userId }">
		  				</td>
		  				<td>
		  					${user.userId }
		  				</td>
		  				<td>
		  					${user.userName }
		  				</td>
		  				<td>
		  					${user.password }
		  				</td>
		  				<td>
		  					${user.lastName }
		  				</td>
		  				<td>
		  					${user.firstName }
		  				</td>
		  				<td>
		  					<c:forEach var="role" items="${user.roles}">
		  						<i class="icon-move"></i>${role.roleName }
		  					</c:forEach>
		  				</td>
		  			</tr>
		  		</c:forEach>
		  		</tbody>
		</table>
      </div>
		
		
	  <!-- table end -->
	  
	  <!-- add an user modal -->
   
  	<script src="${ctx}/resources/js/src/system/sys_user_list.js"></script>
	<script type="text/javascript" src="${ctx}/resources/js/jquery/ux/chosen/chosen.jquery.min.js"></script>
  </body>
  </html>